<template>
  <div>
    <template v-for="n in item.path.length * 2">
      <template v-if="(n - 1) % 2 == 0">
        <highlighted-text
          v-if="item.matched && item.matched.depth == (n - 1) / 2"
          :key="n"
          class="path-node"
          :text="item.path[(n - 1) / 2].text"
          :range="item.matched"
        />
        <span v-else :key="n" class="path-node">{{item.path[(n - 1) / 2].text}}</span>
      </template>
      <span v-else-if="n < item.path.length * 2" :key="n" class="path-node el-icon-arrow-right"></span>
    </template>
    <template v-if="item.matched && item.matched.hideNode">
      <span :class="`path-node el-icon-${item.matched.depth > item.path.length ? 'plus' : 'minus'}`"></span>
      <highlighted-text
        class="path-node"
        :text="item.matched.hideNode.text"
        :range="item.matched"
      />
    </template>
  </div>
</template>

<script>
import HighlightedText from './HighlightedText';

export default {
  components: {
    HighlightedText
  },
  props: {
    data: Object
  },
  data() {
    return {
      item: this.data
    };
  },
  watch: {
    data(v) {
      this.item = v;
    }
  }
}
</script>
  
<style scoped>
.path-node {
  margin: 0 1px;
}
</style>